<template>
    <!-- tag标签 -->
    <el-scrollbar>
        <div class="tag-list">

            <!-- 标签开始 -->
            <template v-for="(item,index) in openTags" :key="item.fullPath">
                <el-dropdown trigger="contextmenu" @command="handleCommand">
                    <el-tag :class="{'activeIndex':item.fullPath ==route.fullPath}" @click="handlerClikckTag(index)"
                        @close="removeTab(index)" type="info" effect="plain"
                        :closable="item.fullPath=='/index/home'?false:true" @contextmenu.native="Rightclick">
                        <el-icon v-if="item.fullPath ==route.fullPath">
                            <LocationFilled />
                        </el-icon>
                        <span>{{$t(item.meta.title)}}</span>
                    </el-tag>
                    <!-- 下拉菜单开始 -->
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item :icon="RefreshRight" :command="{code:1,fullPath:item.fullPath}">刷新</el-dropdown-item>
                            <el-dropdown-item :icon="Close" :disabled="index==openTags.length-1 || openTags.length==1"
                                :command="{code:2,fullPath:item.fullPath}">关闭右侧</el-dropdown-item>
                            <el-dropdown-item :icon="CircleClose" :disabled="openTags.length==1"
                                :command="{code:3,fullPath:item.fullPath}">全部关闭</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                    <!-- 下拉菜单结束 -->
                </el-dropdown>
            </template>
            <!-- 标签结束 -->
        </div>
    </el-scrollbar>
</template>
<script setup lang="ts">
import { LocationFilled, RefreshRight, Close, CircleClose, Location } from "@element-plus/icons-vue";
import {
    useRouter,
    useRoute,
    type RouteLocationNormalizedLoaded,
} from "vue-router";
import { reactive, ref, watch } from "vue";


//标签页
let openTags = reactive([
    { fullPath: "/index/home", name: 'homepage', meta: { title: "homepage" } },
]);

//路由
const route = useRoute();
//路由
const router = useRouter();

//单击标签页
const handlerClikckTag = (index: Number) => {
    let tag = openTags[index];
    if (tag.fullPath != router.fullPath) {
        router.push(tag.fullPath);
    }
};
//新增标签
const addTab = (router: RouteLocationNormalizedLoaded) => {
    if (route.name==='redirect') {
        return
    }
    let open_tags = openTags;
    let findTag = open_tags.find((P) => P.fullPath == route.fullPath);
    if (!findTag) {
        const {
            fullPath,
            meta: { title },
        } = route;
        open_tags.push({ fullPath, meta: { title: title as string } });
    }
};
//删除标签
const removeTab = (index: Number) => {
    let open_tags = openTags;
    let tag = open_tags[index];
    if (route.fullPath == tag.fullPath) {
        //获取要跳转的路由
        let { fullPath } = open_tags[index + 1] || open_tags[index - 1]; // ||符号为短路运算符
        router.push(fullPath);
    }
    open_tags.splice(index, 1);
};

//监听路由改变
watch(route, (route) => {
    addTab(route);
});

// 创建后，刷新页面时当前的页面不会消失
addTab(route)



//菜单栏下拉框点击处理事件
const handleCommand = ({ code,fullPath }: { code: number; fullPath: string }) => {
    console.log(code);
    
    let open_tags = openTags;
    switch (code) {
        case 1: //刷新
            let tag = open_tags.find((item) => item.fullPath === fullPath);
            router.push({ path: "/index/redirect/" + tag?.fullPath });
            break;
        case 2: //关闭右侧
            let index = open_tags.findIndex((item) => item.fullPath == fullPath);//右击标签索引
            let activeIndex = open_tags.findIndex(//当前标签索引
                (item) => item.fullPath === route.fullPath
            );
            open_tags.splice(index + 1);//删除右侧所有标签
            if (activeIndex > index) {
                //当前页面被删除,显示右击菜单页
                router.push(openTags[index].fullPath);
            }
            break;
        case 3: //关闭全部
            openTags.splice(1);
            router.push({ name: "home" });
            break;
    }
};

const Rightclick = ()=>{
    document.body.click()
}

</script>
<style lang="less" scoped>
.tag-list {
    display: flex;
    border: 1px solid #eaeaea;
    padding: 5px 20px;
    box-shadow: 0px 7px 4px -7px #d4d7de ;

    &::v-deep .el-scrollbar__wrap {
        padding: 1px 0px;
        /*解决出现的纵向滚动的bug*/
    }

    /deep/svg {
        color: white;
    }
}

.el-tag {
    margin-right: 7px;
    border-radius: 0;
    line-height: 28px;
    height: 28px;
    color: #606266;
    cursor: pointer;

    .active-icon {
        display: none;
    }

    // 激活的tag
    &.activeIndex {
        background-color: #409eff;
        color: whitesmoke;
        //覆盖close默认样式
    }
}
</style>